<template>
  <div class="privilege">
    <van-nav-bar title="我的礼品卡" left-arrow @click-left="back">
      <van-icon name="info-o" slot="right" v-tap="{methods:show}" />
    </van-nav-bar>
    <van-popup 
        v-model="flag"
        position="bottom"
    >
        <div class="introduce">
            <h1>礼品卡使用说明</h1>
            <p>1. 礼品卡在造作新家App、官网、实体店，均可使用。</p>
            <p>2. 礼品卡可用于抵扣除礼品卡外全部产品的支付金额，使用时可与其他优惠同享。</p>
            <p>3. 礼品卡可分多次使用，直至余额用完为止。多张礼品卡，可叠加在一起使用。</p>
            <p>4. 礼品卡在购买时提供发票，之后使用礼品卡时，抵扣的金额不予开具发票。</p>
            <p>5. 礼品卡抵扣的金额不计入成长值和晒单返券奖励。</p>
            <p>6. 礼品卡抵扣的金额在退款时，会退至礼品卡里。</p>
            <p>7. 礼品卡购买成功后，不支持退换。</p>
            <p>8. 礼品卡使用有效期为，自兑换起，36个月内可使用。</p>
        </div>
    </van-popup>

    <div class="line"></div>
    <div class="content bingo">
      <div class="wrapper">
        <div class="codebox">
          <input type="text" placeholder="输入卡号" />
        </div>
        <div class="coupons-break"></div>
        <div class="codebox code">
          <input type="text" placeholder="输入兑换码" />
        </div>
        <div class="coupons-btn">兑换</div>
      </div>
      <div class="img_wrapper">
          <img src="../assets/gift.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myprivilege",
  data() {
    return {
      activeName: "a",
      flag:false,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    show(){
        this.flag = !this.flag;
    }
  },
};
</script>

<style scoped>
.van-ellipsis{
    font-size:30px;
}
.van-icon {
  color: #333;
  font-size: 36px;
}

.line {
  width: 100%;
  height: 12px;
  background: #f6f6f6;
}
.coupons-break {
    display: inline-block;
    width: 2px;
    height: 40px;
    background: #000;
}
.wrapper {
  margin: 26px 34px 9px;
  padding: 17px 34px 17px 23px;
  border: 1px solid #d2d2d2;
  font-size: 0;
  background: #f9f9f9;
}
.codebox{
    display: inline-block;
    vertical-align: top;
    width: auto;
}
.codebox input{
    width: 205px;
    background: #F9F9F9;
    display: block;
    font-size: 24px;
    line-height: 44px;
    border: 0;
}
.code{
    margin-left:30px;
}
.wrapper .coupons-btn {
    float: right;
    width: 96px;
    border-radius: 1.5px;
    color: #fff;
    line-height: 44px;
    text-align: center;
    background: #000;
    vertical-align: top;
    font-size: 24px;
    font-weight: 700;
    border: 0;
}
.img_wrapper{
    padding-bottom: 230px;
    padding-top: 200px!important;
    width: 341px;
    height: 341px;
    margin: 0 auto;
}
.img_wrapper img{
    width: 100%;
}
.introduce{
    padding: 30px 33px;
    background: #fff;
    box-sizing: border-box;
}
.introduce h1{
    font-size: 35px;
    line-height: 1;
    padding-bottom: 30px;
    color: #2b2b2b;
    text-align: left;
    position: relative;
    margin: 0;
}
.introduce h1::after{
    content: '';
    width: 109.5%;
    height: 2px;
    position: absolute;
    left: -33px;
    bottom: 0;
    z-index: 2;
    background: #acacac;
}
.introduce p{
    font-size: 27px;
    line-height:42px;
    margin-bottom: 0;
}
.introduce p a{
    color: #333;
}

</style>